<template>
  <div>
    <a-modal
      :visible="increaseManVisible"
      :title="(formState.id? '编辑':'新增') + '参会人员信息'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="70%"
      :dialog-style="{ margin: '0 auto'}"
      wrapClassName=""
      @cancel="closeVisible"
      >
      <template slot="footer">
          <a-button @click="closeVisible">
              取消
          </a-button>
          <a-button :loading="inLoading" class="blue-btn" @click="onSubmit(false)">
              提交
          </a-button>
      </template>
      <div>
        <a-form :form="dform" ref="form" class="onSiteInspectionCheck-In-model-form-box">
          <a-descriptions bordered style="width: 100%;">
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    姓名
                </span>
                <a-form-item ref="fxm" prop="fxm" class="zm-form-model">
                    <div style="width: 100%;">
                        <a-textarea
                            style="width: 100%;"
                            v-model="formState.fxm"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入姓名"
                            v-decorator="[ 'fxm', {initialValue:formState.fxm,rules: rules.fxm}]"
                        ></a-textarea>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    部门
                </span>
                <a-form-item ref="fbm" prop="fbm" class="zm-form-model">
                    <div style="width: 100%;">
                        <a-textarea
                            style="width: 100%;"
                            v-model="formState.fbm"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入部门"
                            v-decorator="[ 'fbm', {initialValue:formState.fbm,rules: rules.fbm}]"
                        ></a-textarea>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    职务
                </span>
                <a-form-item ref="fzw" prop="fzw" class="zm-form-model">
                    <div style="width: 100%;">
                        <a-textarea
                            style="width: 100%;"
                            v-model="formState.fzw"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入职务"
                            v-decorator="[ 'fzw', {initialValue:formState.fzw,rules: rules.fzw}]"
                        ></a-textarea>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    人员类型
                </span>
                <a-form-item ref="frylx" prop="frylx" class="zm-form-model">
                    <div style="width: 100%;">
                      <a-radio-group
                        name="radioGroup"
                        style="width: 100%;"
                        v-model="formState.frylx"
                        v-decorator="[ 'frylx', {initialValue:formState.frylx,rules: rules.frylx}]">
                        <a-radio value="企业">
                          企业
                        </a-radio>
                        <a-radio value="审评员">
                          审评员
                        </a-radio>
                        <a-radio value="观察员">
                          观察员
                        </a-radio>
                      </a-radio-group>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="4">
                <span slot="label" class="descriptions-label-slot">
                    <!-- <span class="xhText" >*</span> -->
                    签名
                </span>
                <a-form-item ref="fqmfj" prop="fqmfj" class="zm-form-model">
                    <div style="width: 100%;">
                        <img v-if="formState.fqmfj" :src="formState.fqmfj" alt="签名附件" style="width: 100px;height: 30px;">
                        <a-button @click="onSubmit(true)">{{ formState.fqmfj?'重新签名':'开始签名'}}</a-button>
                    </div>
                </a-form-item>
            </a-descriptions-item>
          </a-descriptions>
        </a-form>
      </div>
    </a-modal>
    <QRQueryResults ref="QRQueryResultsRef" />
  </div>
</template>
<script>
import { addSqsxHymx,updateSqsxHymx,} from './service/index'
import QRQueryResults from './QRQueryResults'
import moment from 'moment'
export default {
  components: {
      QRQueryResults
  },
  data() {
    return {
      moment:moment,
      increaseManVisible: false,
      isView: false,
      dform:this.$form.createForm(this, { name: 'dform' }),
      formState: {},
      rules:{
        fxm: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
        }],
        fzw: [{
            required: true,
            message: '请输入职务',
            trigger: 'blur',
        }],
        fbm: [{
          required: true,
          message: '请输入部门',
          trigger: 'blur',
        }],
        frylx: [{
          required: true,
          message: '请选择人员类型',
          trigger: 'blur',
        }],
      },
      inLoading: false,
    }
  },
  methods: {
    getData(val,isview){
      this.isView = isview
      //console.log(val,isview)
      if(val.id){
        this.formState = val
      } else {
        this.formState = val
      }
      //console.log(this.formState)
    },
    closeVisible(){
      this.increaseManVisible = false
      this.$emit('success')
    },
    onSubmit(qmTuen){
      this.dform.validateFields((err, values) => {
          if (!err) {
            //console.log(values)
              let data = this.formState
              //console.log(data)
              if(this.formState.id){
                if(!qmTuen){
                  this.inLoading = true
                }
                  updateSqsxHymx(data).then(res => {
                      if(res.code == 200){
                        if(qmTuen){
                          this.$refs.QRQueryResultsRef.visibleQRQrCode = true
                          this.$refs.QRQueryResultsRef.getData(res.result)
                          return
                        }
                          this.$message.success(res.message)
                          this.closeVisible()
                      } else {
                          this.$message.warning(res.message)
                      }
                      this.inLoading = false
                  })
              } else {
                if(!qmTuen){
                  this.inLoading = true
                }
                  addSqsxHymx(data).then(res => {
                      if(res.code == 200){
                        //console.log(res.result)
                        if(qmTuen){
                          this.$refs.QRQueryResultsRef.visibleQRQrCode = true
                          this.$refs.QRQueryResultsRef.getData(res.result)
                          return
                        }
                          this.$message.success(res.message)
                          this.closeVisible()
                      } else {
                          this.$message.warning(res.message)
                      }
                      this.inLoading = false
                  })
              }
          } else {
              //console.log('error submit!!');
              return false;
          }
      });
    },
  },
}
</script>
<style lang="less">
.onSiteInspectionCheck-In-model-form-box {
  padding: 0 15px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 95px !important;//确保左侧固定文字不会换行
            justify-content: flex-end;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

}
</style>
